<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
  >
    <!-- 插入回显的选项 -->
    <el-option
      v-for="option in extraOptions"
      :key="option.value"
      :value="option.value"
      :label="option.label"
      disabled
    />
    <slot></slot>
  </el-select>
</template>

<script>
export default {
  name: 'EnhSelect',
  props: {
    defaultOptions: {
      type: [Object, Array],
      default: () => ({}), // 默认是一个对象或空数组
    },
  },
  computed: {
    options() {
      // 从插槽中提取 options
      const slotNodes = this.$slots.default || [];
      const slotOptions = slotNodes
        .filter(vnode => vnode.componentOptions && vnode.componentOptions.tag === 'el-option')
        .map(vnode => vnode.componentOptions.propsData);
      return slotOptions;
    },
    extraOptions() {
      // 处理 defaultOptions 为对象或数组的情况
      const defaultOptionsArray = Array.isArray(this.defaultOptions)
        ? this.defaultOptions
        : [this.defaultOptions];
      return defaultOptionsArray.filter(option => {
        const exists = this.options.some(o => o.value === option.value);
        return !exists && option.value !== undefined && option.label;
      });
    },
  },
};
</script>
